<template>
  <Card class="player-card" :bordered="false">
    <div slot="title" @dblclick="gobackVideoGridPages">
      <Row>
        <i-col :span="24">
          <i-col :span="8">
            <span style="color: #00155b" class="road-title">{{
              monitorData.videoMsg.ch_name
            }}</span>
          </i-col>
          <!-- <i-col :span="13">
            <span class="weather">
              <span v-for="(item, index) in weatherIcon" :key="index">
                <Icon :type="item.type" :color="item.color" size="30" />
                {{ item.content }}&nbsp;&nbsp;
              </span>
            </span>
          </i-col> -->
          <i-col :span="16">
            <span>
              <Button
                slot="extra"
                type="warning"
                shape="circle"
                size="default"
                style="margin-top: 4px; font-size: 18px; float: right"
                @click="gotoAllEventsPage"
              >
                <!-- <Icon type="ios-arrow-back"></Icon> -->
                <span style="color: #00155b; font-weight: bold; font-size: 18px"
                  >报警事件列表</span
                >
              </Button>
            </span>
          </i-col>
        </i-col>
      </Row>
    </div>
    <div class="vidplayer">
      <flv-video-player
        :videoSrc="monitorData.videoMsg.streamUrl"
      ></flv-video-player>
      <!-- <rtmp-player :src="monitorData.videoMsg.streamUrl"></rtmp-player> -->
    </div>
    <Row>
      <i-col :span="24">
        <i-col :span="4">
          <p>
            拥堵状况:
            <Icon
              v-if="monitorData.videoSta.jam"
              type="ios-radio-button-on"
              color="red"
              size="30"
            />
            <Icon v-else type="ios-radio-button-on" color="#2EFE2E" size="30" />
          </p>
        </i-col>
        <i-col :span="4">
          <p>
            行人入侵:
            <Icon
              v-if="monitorData.videoSta.person"
              type="ios-man"
              color="red"
              size="30"
            />
            <Icon v-else type="ios-man" color="gray" size="30" />
          </p>
        </i-col>
        <i-col :span="4">
          <p
            v-if="
              monitorData.videoMsg.channel == '1' ||
              monitorData.videoMsg.channel == '2' ||
              monitorData.videoMsg.channel == '3' ||
              monitorData.videoMsg.channel == '4' ||
              monitorData.videoMsg.channel == '5'
            "
            style="color: gray"
          >
            停车:
            <Icon type="ios-radio-button-on" color="gray" size="30" />
          </p>
          <p v-else>
            停车:
            <Icon
              v-if="monitorData.videoSta.stop"
              type="ios-radio-button-on"
              color="red"
              size="30"
            />
            <Icon v-else type="ios-radio-button-on" color="#2EFE2E" size="30" />
          </p>
        </i-col>
        <i-col :span="4">
          <p>
            天气状况:
            <Icon
              :type="weatherIcon[monitorData.videoSta.weather].type"
              :color="weatherIcon[monitorData.videoSta.weather].color"
              size="30"
            />
          </p>
        </i-col>
        <i-col :span="4">
          <p>车速:{{ monitorData.videoSta.speed }}km/h</p>
        </i-col>
        <i-col :span="4">
          <p>
            <Button
              slot="extra"
              type="success"
              shape="circle"
              size="default"
              style="margin: 5px 10px 0 0; font-size: 20px; float: right"
              @click="gobackVideoGridPages"
            >
              <Icon type="ios-arrow-back" size="20" color="black"></Icon>
              <span style="color: #042e6c; font-weight: bold; font-size: 18px"
                >返回</span
              >
            </Button>
          </p>
        </i-col>
      </i-col>
    </Row>
  </Card>
</template>
<script>
import { mapState, mapGetters, mapActions } from "vuex";
import RtmpPlayer from "./rtmpPlayer";
import FlvVideoPlayer from "./flvVideoPlayer";
var node_schedule = require("node-schedule");
export default {
  components: {
    RtmpPlayer,
    FlvVideoPlayer,
  },
  computed: {
    ...mapState(["monitorData", "weatherIcon"]),
  },
  mounted() {
    // this.getEventTable(); //获取当前道路信息，以显示全部报警事件

    var intervalVideoState = node_schedule.scheduleJob("*/5 * * * * *", () => {
      //console.log("实时监控页面视频状态实时获取 -------------> 一个道路状态数据!")
      this.getOneVideoState(this.monitorData.videoMsg.ch_name);
    });
    // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
    this.$once("hook:beforeDestroy", () => {
      //console.log("取消 实时监控页面视频状态实时获取 -------------> 一个道路状态数据");
      intervalVideoState.cancel();
    });
  },
  methods: {
    ...mapActions([
      "closeDetailsLoadVideoGridPages",
      "getOneVideoState",
      "getQueryEventsTableData",
    ]),
    gobackVideoGridPages() {
      this.closeDetailsLoadVideoGridPages();
    },
    gotoAllEventsPage() {
      this.$router.push({
        path: "/events",
        name: "events",
        params: {
          roadname: this.monitorData.videoMsg.ch_name,
        },
      });
    },
    // async getEventTable() {
    //   let road_name = this.monitorData.videoMsg.ch_name;
    //   // let params = {
    //   //   road_name,
    //   //   page_index: 1,
    //   //   page_size: 50
    //   // };
    //   // // let resData = await reqEvent(params);
    //   // // if (resData.code === 6000) {
    //   // //   this.allMonitorEventList = resData.data.events;
    //   // //   //console.log("allMonitorEventList:"+this.allMonitorEventList)
    //   // // }
    //   // this.getQueryEventsTableData(params);
    // }
  },
};
</script>
<style lang="less">
.vidplayer {
  height: 100%;
  width: 100%;
}
.player-card .ivu-card-head {
  padding: 0px 10px;
  background-color: #13a4c2;
  border-bottom: 1px solid #13a4c2;
  height: 40px;
  margin-top: 5%;
}
.player-card .ivu-card-head .road-title {
  font-size: 2.5rem;
  height: 40px;
  line-height: 40px;
  color: #000;
  text-align: left;
  font-weight: bold;
}
.player-card .ivu-card-body {
  padding: 3px;
  background-color: #13a4c2;
}
.player-card .ivu-card-body p {
  font-size: 25px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  font-weight: bold;
  color: #042e6c;
}
.weather {
  font-size: 20px;
  color: #fff;
  font-weight: normal;
  float: right;
  line-height: 40px;
}
</style>
